<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>课程目录简介</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<!--标准mui.css-->
		<link rel="stylesheet" href="../../css/mui.min.css">
		<!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="../css/app.css" />
		<link rel="stylesheet" href="../../css/base.css">
		<link rel="stylesheet" href="../../css/mooc.css">
	</head>

	<body>
		<style>
			body {
				background-color: white;
			}
			
			.headbar1 {
				position: relative;
			}
			
			.headbar {
				background-color: #ffffff;
			}
			
			.mui-slider-indicator {
				background-color: white;
			}
			
			.mui-title {
				color: #333333;
			}
			
			.mui-control-content {
				min-height: 350px;
			}
			
			.mui-slider .mui-segmented-control.mui-segmented-control-inverted ~ .mui-slider-group .mui-slider-item {
				border-bottom: 0px solid #c8c7cc;
			}
			
			.mui-control-content .mui-loading {
				margin-top: 20px;
			}
			
			.mui-content-view {
				height: 200px;
				overflow-y: scroll;
				background-color: #FFFAFA;
			}
			
			#viewtip {
				text-align: center;
				background-color: #EDEDED;
				height: 100%;
				background-repeat: no-repeat;
				background-position: 50% center;
			}
			#viewtip img{
				width:100%;
				height:100%;
			}
			.mui-bar.mui-bar-nav .mui-icon.mui-icon-help {
				margin-right: 10px;
			}
			
			.mui-icon-left-nav {
				color: #333333;
			}
			.mui-scroll-wrapper{
				margin-top:0px;
			}
			/*****课程简介****/
			
			.mui-control-content {
				background-color: white;
			}
			
			.course-div {}
			
			.course-seat {
				height: 10px;
				background-color: #efefef;
			}
			
			.course-introduce {
				padding: 20px 20px 20px 20px;
				border-bottom: 1px solid #efefef;
			}
			
			.intro-title .ck {
				float: left;
				width: 2px;
				height: 14px;
				margin-top: 3px;
				margin-left: 0px;
				background-color: #3ac9af;
			}
			
			.intro-title .cc {
				margin-left: 11px;
				font-size: 18px;
				color: #626262;
			}
			
			.teacher-name {
				margin-top: 6px;
				margin-left: 12px;
				font-size: 15px;
				color: #666666;
				min-height:10px;
			}
			
			.intro-content {
				margin-top: 10px;
				margin-left: 12px;
				font-size: 15px;
				color: #666666;
				white-space: normal;
				min-height: 20px;;
			}
			/****课程目录****/
			.mui-navigate-right{
				background-color: white;
				font-size:17px;
				color: #666666;
			}
			/******foot按钮******/
			
			#nav-mui-bar {
				display:none;
				background-color: white;
			}
			
			.footbtndiv {
				text-align: center;
				padding-top: 13px;
			}
			
			.footbtnspan {
				padding: 6px 18px 6px 18px;
				border: 1px solid #ffba7e;
				border-radius: 3px;
				color: #ffba7e;
				font-size: 13px;
			}
			/*************/
			.catalog-div pre{float:right;}
			.catalog-div pre.tom{margin-right:10px;}
			.catalog-div label{padding-right:50px;width:80%;}
			.catalog-div a{border-bottom:1px solid #f8f8f8;}
			.catalog-div a:hover{color:#4a4a4a;}
			.catalog-div a:active{color:#4a4a4a;}
			.catalog-div a:visited{color:#4a4a4a;}
			.leftmenu-c{display: none;}
			.leftmenu-c-c{display: none;}
			.leftmenu-c-c-c{display: none;}
		</style>
		<form>
			<input type="hidden" id="fCourseid" value="">
			<input type="hidden" id="fCatalogid" value="">
			<input type="hidden" id="fParentid" value="">
		</form>
		<header class="mui-bar mui-bar-nav headbar">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title" id="coursetilte">课程</h1>
		</header>
		<div class="mui-content">

			<!--播放框start-->
			<div class="mui-content-view" id="viewres">
				<div id="viewtip"><img data-lazyload="123" id="courseimg"></div>
			</div>
			<!--播放框end-->

			<!-- 切换列表start -->
			<div id="slider" class="mui-slider">
				<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<a class="mui-control-item  mui-active" href="#item1mobile">课程简介</a>
					<a class="mui-control-item" href="#item2mobile">课程目录</a>
				</div>
				<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-6"></div>
				<div class="mui-slider-group">
					<!--课程简介start -->
					<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
						<div id="scroll1" class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<!--example start-->
								<div class="course-seat"></div>
								<div class="course-div">
									<div class="course-introduce">
										<div class="intro-title"><span class="ck">&nbsp;</span><span class="cc">课程概述</span></div>
										<div class="intro-content"><span id="courseintor"></span></div>
									</div>
									<div class="course-introduce">
										<div class="intro-title"><span class="ck">&nbsp;</span><span class="cc">教学老师</span></div>
										<div class="teacher-name"><span id="courseteacher"></span></div>
										<!--<div class="intro-content"><span id="teacherintro">....</span></div>-->
									</div>
								</div>
								<!--example end-->
							</div>
						</div>
					</div>
					<!--课程简介end -->
					<!--课程目录start -->
					<div id="item2mobile" class="mui-slider-item mui-control-content">
						<div id="scroll2" class="mui-scroll-wrapper">
							<div class="mui-scroll" id="coursenotes-div">
								<!--example start-->
								<div class="course-seat"></div>
								<div class="catalog-div" id="catalog-div">
								<!--
									<ul class="leftmenu">
										<li>
											<a><label>一级</label><pre class="tom" ></pre></a>
											<ul class="leftmenu-c">
												<li><a href="#"><label>iOS</label></a>
												</li>
												<li><a href="#"><label>Android</label></a>
												</li>
												<li><a href="#"><label>HTML5</label></a>
												</li>
											</ul>
										</li>
										<li><a href="#"><label>方案</label><pre class="tom" ></pre></a>
											<ul class="leftmenu-c">
												<li><a href="#"><label>PC方案</label></a>
												</li>
												<li><a href="#"><label>手机方案</label></a>
												</li>
												<li><a href="#"><label>TV方案</label></a>
												</li>
											</ul>
										</li>
									</ul>
									<ul class="leftmenu">
										<li>
											<a href="#"  catalogid="654"><label>1</label><pre class="tom"></pre></a>
											<ul class="leftmenu-c">
												<li>
													<a href="#"  catalogid="655"><label>11</label><pre class="tom"></pre></a>
													<ul class="leftmenu-c-c">
														<li>
															<a href="#"  catalogid="656"><label>111</label><pre class="tom"></pre></a>
															<p>
																	<a href="#"  catalogid="657"><label>1111</label></a>
															</p>
														</li>
													</ul>
												</li>
											</ul>
										</li>
									</ul>
									-->
								</div>
								<!--example end-->
							</div>
						</div>
					</div>
					<!--课程目录end -->
				</div>
			</div>
			<!--切换列表end-->
			<nav class="mui-bar mui-bar-tab" id="nav-mui-bar">
			   <div class="footbtndiv" id="addcourse"><span class="footbtnspan">参加该课程</span></div>
		    </nav>
		</div>
		<script src="../../js/mui.min.js"></script>
		<script src="../../script/config.js"></script>
		<script src="../../script/moocpublic.js"></script>
		<script src="../../js/mui.lazyload.js"></script>
	    <script src="../../js/mui.lazyload.img.js"></script>
	    <script src="../../js/jquery-1.4.4.min.js"></script>
		<script src="../../js/zepto.min.js"></script>
		<script src="../../js/DMobileFrame_DownLoadUtil.js"></script>
		<script src="script/selfcoursecatalog.js"></script> 
		<script>
			(function($) {
				$('.mui-scroll-wrapper').scroll({
					indicators: false //是否显示滚动条
				});
			})(mui);
			
		</script>
	</body>

</html>